<template>
<div>
  <el-container class="el-container">
    <el-header height="178px">
        <Header></Header>
    </el-header>
    <el-main class="main">
        <div class="pagehold abs" style="height: 729px">
          <div class="leftArrow">
            <img class="bannergo bannergo1" src="../../../../../static/img/返回.png"  @click="arrowClick('left')" />
          </div>
          <el-carousel arrow="never" indicator-position="none"   height="645px" class="pagehold">
            <el-carousel-item v-for="item in bannerurl" :key="item" >
              <img :src="item"/>
            </el-carousel-item>
          </el-carousel>
          <div class="rightArrow bannergo2">
            <img class="bannergo" src="../../../../../static/img/返回拷贝.png" @click="arrowClick('right')" />
          </div>
<!--          <el-input class="middlekeywords" v-model="middlekeywords" placeholder="请输入关键词搜索">-->
<!--            <el-button class="el-buttona" slot="append" icon="el-icon-search"></el-button>-->
<!--          </el-input>-->
              <input type="text" class="middlekeywords" v-model="middlekeywords" placeholder="请输入关键词搜索"/>
          <button class="middlebut"><img src="static/img/搜索拷贝 3.png"/></button>
        </div>
      <div class="biaoben">标本模型</div>
      <div class="markline"><i class="markmiddel"></i></div>
      <el-card class="box-card" >
        <div class="classtype">
          <div class="typele le">分类筛选</div>
          <div class="typeri le">
            <span class="spanactive">系统解剖学标本</span><span>系统解剖学标本</span><span>系统解剖学标本</span><span>系统解剖学标本</span><span>系统解剖学标本</span><span>系统解剖学标本</span><span>系统解剖学标本</span><span>系统解剖学标本</span><span>系统解剖学标本</span><span>系统解剖学标本</span><span>系统解剖学标本</span><span>系统解剖学标本</span><span>系统解剖学标本</span>
          </div>
        </div>
        <div class="solt">
          <div class="soltle le">排序</div>
          <div class="soltri le">
            <span class="soltactive">最新发布</span><span>喜欢最多</span><span>浏览最多</span><span>浏览最多</span>
          </div>
        </div>
      </el-card>
      <ul class="showimgs">
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
        <li>
          <div class="imgbox"><img src="static/img/showimg.png"/></div>
          <div class="imgtitle">运动系统</div>
          <div class="imgbottom">
            <span class="views"><i class="views_num">1420</i></span>
            <span class="likes"><i class="likes_num">1420</i></span>
          </div>
        </li>
      </ul>
      <div class="pagess"><el-pagination
        class="pagesfen"
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination></div>
    </el-main>
  </el-container>
</div>
</template>
<script>
  import Header from'../../../../components/deren/header.vue'
    export default {
      components:{
      Header
    },
        name: "home",

        data(){
          return{
            bannerurl:["../../../../../static/img/组 34.png"],
            input:"",
            middlekeywords:""
          }
        },
      methods:{
        arrowClick(val) {
          if(val === 'right') {
            this.$refs.cardShow.next()
          } else {
            this.$refs.cardShow.prev()
          }
        }
      }
    }
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .classtype{
    overflow: hidden;
  }
  ul li{
    list-style: none;
  }
  .imgbottom{
    margin-top: 12px;
  }
  .pagess{
    width: 1200px;
    margin: 0 auto;
  }
  .el-pagination is-background{
    width: 400px;
  }
  .pagesfen{
    width: 400px;
    margin: 0 auto;
  }
  .imgbottom span{
    display: inline-block;
  }
  .imgbox{
    text-align: center;
    margin-top: 39px;
  }
  .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
    min-height: 40px !important;
    min-width: 40px !important;
  }
  i{
    font-style: normal;
  }
  .views{
    display: inline-block;
    width: 70px;
    height: 15px;
    background: url("../../../../../static/img/浏览.png") no-repeat 0px 2px;
    margin-left: 16px;
  }
  .views i{
    margin-left: 20px;
  }
  .likes i{
    margin-left: 20px;
  }
  .likes{
    height: 15px;
    display: inline-block;
    width: 51px;
    background: url("../../../../../static/img/收 藏 (1).png") no-repeat  0px 0px;
  }
  .imgbox{
    width: 267px;
    height: 241px;
    font-weight: 400;
  }
  .soltactive{
    color: white;
    background: rgb(71,155,172);
    border-radius: 10px;
  }
  .showimgs{
    width: 1200px;
    margin: 0 auto;
  }

  .soltle{
    margin-right: 16px;
    letter-spacing: 32px;
    line-height: 44px;
  }
  .sortri{
    width: 112px;
    height: 44px;

  }
  .soltri span{
    padding: 14px 24px;
    display: inline-block;
  }
  .typele{
    width: 64px;
    height: 44px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 44px;
    margin-right: 43px;
  }
  .solt{
    padding: 28px 0;
  }
  .typeri span{
    padding: 14px 24px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    line-height: 18px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #333333;
    margin-bottom: 14px;

  }
  .spanactive{
    background: #479BAC;
    color: white !important;
  }
  .typeri{
    width: 1044px;
    border-bottom: 1px dashed #c5c5c5;
  }
  .box-card{
    width: 1200px;
    height: 305px;
    margin: 0 auto;
    margin-bottom: 36px;
  }
  .solt{
    overflow: hidden;
  }
  .le{
    float: left;
  }
  .ri{
    float: right;
  }

  .biaoben{
    text-align: center;
    font-size: 40px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
  }
  .main{
    margin: 0 auto;
  }
  .middlebut{
    width: 100px;
    height: 58px;
    background: #479BAC;
    border-radius: 29px;
    border: none;
    position: absolute;
    top: 615px;
    left: 1447px;
    z-index: 100;
  }
  .markline{
    width: 157px;
    height: 2px;
    background: #479BAC;
    opacity: 0.4;
    margin: 0 auto;
    margin-top: 14px;
    position: relative;
    margin-bottom: 27px;
  }
  .markmiddel{
    width: 40px;
    height: 8px;
    background: #479BAC;
    display: inline-block;
    position: absolute;
    top:-3px;
    left: 58px;
  }
  .el-buttona{
    position: absolute;
    left: 20px;
    margin: -20px 8px ;
  }
  .middlekeywords .middlekeywords{
    z-index: 100;
  }

  .bannergo{
    z-index: 999!important;
  }
  .el-container{
    width: 100%;
    margin: 0 auto;
  }
  .el-carousel__indicator{
    padding: 80px 4px;
  }
  .middlekeywords div{
    left: 20px;
  }
  .showimgs{
    overflow: hidden;
  }
  .middlekeywords{
    font-size: 20px;
    line-height: 76px;
    position: absolute;
    width: 1200px;
    height: 76px;
    box-shadow: 0px 6px 29px 0px rgba(0, 0, 0, 0.13);
    border-radius: 38px;
    /*text-align: center;*/
    margin-left: 360px;
    bottom: 48px;
    background-color: white;
    z-index: 99;
    outline: none;
    border: none;
    padding: 0 33px;
  }
  .el-input--medium[data-v-d474d71a] .el-input__inner{
    background-color:#ffffff !important;
    z-index: 99;
  }
  .el-input--medium.el-input__inner{
    background-color: white !important;
  }
  .el-input--medium /deep/.el-input__inner{
    width: 1200px;
    height: 76px;
    box-shadow: 0px 6px 29px 0px rgba(0, 0, 0, 0.13);
    border-radius: 38px;
    background-color: #21000000;
    z-index: 99;
  }
  .leftArrow{
    top: 351px;
    left: 166px;
    z-index: 99;
  }
  .rightArrow{
    top:351px;
    right: 166px;
    z-index: 99;
  }
  .el-carousel-item img{
    width: 1920px;
    height: 645px;
  }
  .showimgs{
    background: #F9F9F9;
  }
  .showimgs li{
    width: 276px;
    height: 355px;
    background-image: url("../../../../../static/img/模型1.png") ;
    background-repeat: no-repeat;
    background-position: 238px 14px;
    background-color: white;
    overflow: hidden;
    margin-right: 32px;
    margin-bottom: 32px;
    float: left;
  }
  /*.showimgs li:hover li{*/
  /*  border: 2px saddlebrown solid;*/
  /*  display: none;*/
  /*}*/
  .showimgs li:nth-child(4){
    margin-right: 0px !important;
  }
  .showimgs li:nth-child(8){
    margin-right: 0px !important;
  }
  .showimgs li:nth-child(12){
    margin-right: 0px !important;
  }
  .imgtitle{
    margin-top: 16px;
    margin-left: 17px;
    font-size: 18px;
  }
  .pagehold{
    width: 1920px;
    margin: 0 auto;
  }
  .el-main{
    padding: 0px;
  }
  .main{
    background-color: #F9F9F9;
  }
  .leftArrow{
    position: absolute;
    left: 10px;
  }
  .leftArrow[data-v-d474d71a]{
    left: 166px;
  }
  .rightArrow{
    position: absolute;
    right: 10px;
  }
  .abs{
    position: relative;
  }
  .rightArrow[data-v-d474d71a]{
    right: 166px;
  }
  .el-main{
    width: 100%;
    overflow: hidden;
  }
  body{
    background: #F9F9F9;
  }

</style>
